<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="tabs" :style="{'top': navHeight}">
					<wd-tabs lineWidth="60" lineHeight="2" custom-class="wd-tabs-custom-class" v-model="currentTab"
						@change="tabsChange">
						<block v-for="item in tabs" :key="item">
							<wd-tab :title="item">
								<!-- <view class="content">{{ item }}</view> -->
							</wd-tab>
						</block>
					</wd-tabs>
				</view>
				<view class="list">
					<queryItem @doOrderPay="doOrderPay" @orderOk="doOrderOk" v-for="(item,index) in dataList"
						:posts="item"></queryItem>
				</view>
			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import useRouter from '@/hooks/useRouter.ts';
	import useStatusHeight from '@/hooks/useStatusHeight';
	import usePosts from "./usePosts"
	import queryItem from "./../components/item"
	import { doQueryComfirmFinish, doQueryPayment } from '@/api/query.ts';
	import WxPay from "@/libs/WxPay"
	export default defineComponent({
		name: 'MyPosts',
		components: {
			queryItem
		},
		setup(props, ctx) {
			const router = useRouter();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const statusHeight = useStatusHeight();
			const posts = usePosts();
			const doOrderOk = (item) => {
				uni.$wdToast.confirm("确认当前查询已完成吗？", "提示").then((res : any) => {
					doQueryComfirmFinish({
						query_order_id: item.id
					}).then((res) => {
						uni.$wdToast.show("确认成功")
						posts.reGetData();
					});
				});
			}
			const doOrderPay = (item) => {
				uni.$wdToast.confirm("支付后才任务才可以被人领取，确认支付吗？", "提示").then((res : any) => {
					const wxpay = new WxPay();
					wxpay.pay({
						orderId: item.id,
						type: 4,
						source: 1,
					}, {
						fail: () => {
							uni.$wdToast.show("取消支付")
							posts.reGetData();
						},
						getOrderCb: () => {
							uni.$wdToast.show("支付成功")
							posts.reGetData();
						}
					})
					// doQueryPayment({
					// 	query_order_id: item.id,
					// }).then((res) => {
					// 	uni.$wdToast.show("支付成功")
					// 	posts.reGetData();
					// })
				});
			}
			return {
				theme,
				// #ifndef MP-WEIXIN
				navHeight: statusHeight.navHeight,
				// #endif
				// #ifdef MP-WEIXIN
				navHeight: 0,
				// #endif

				...posts,
				doOrderOk,
				doOrderPay,
				// dataList,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		position: relative;
		padding-top: 84rpx; // 设置tabs的高度，根据实际高度调整

		.tabs {
			position: fixed;
			width: 100%;
			height: 84rpx;
			top: 0;
			z-index: 2;

			:deep(.wd-tabs__nav) {
				height: 84rpx;
				line-height: 84rpx;

				.wd-tabs__nav-container {
					height: 84rpx;
					line-height: 84rpx;

					.wd-tabs__nav-item {
						height: 84rpx;
					}
				}
			}
		}

		.list {
			padding: 0 24rpx 24rpx;






		}
	}
</style>